<template>
	<view id="user-real">
		<view class="content-form">
			<view class="h3">身份信息</view>
			<view class="apply-row">
				<view class="h6">真实姓名</view>
				<view class="apply-in">
					<input type="text" v-model="formObj.true_name" placeholder="请输入真实姓名" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">身份信息</view>
				<view class="apply-in">
					<input type="text" v-model="formObj.idcard" placeholder="请输入证件号" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
		</view>
		<view class="content-form">
			<view class="h3">上传证件</view>
			<view class="real-row">
				<view class="real-item">
					<image src="/static/icon/id_card_zhengmian.png" @click="chooseImgs(1)" v-show="!formObj.positive_image" class="real-icon" mode=""></image>
					<image :src="formObj.positive_image" @click="chooseImgs(1)" v-show="formObj.positive_image" class="real-icon" mode="aspectFit"></image>
					<view class="r-name">人像面</view>
				</view>
				<view class="real-item">
					<image src="/static/icon/id_card_fanmian.png" @click="chooseImgs(2)" v-show="!formObj.obverse_image" class="real-icon" mode=""></image>
					<image :src="formObj.obverse_image" @click="chooseImgs(2)" v-show="formObj.obverse_image" class="real-icon" mode="aspectFit"></image>
					<view class="r-name">国徽面</view>
				</view>
			</view>
		</view>
		
		<view class="content-footer">
			<view class="footer-btn" @click="submitReal()">确认提交</view>
		</view>
	</view>
</template>

<script>
	import { apiroot } from '@/siteInfo.js'
export default {
	data() {
		return {
			formObj: {
				true_name: '',
				idcard: '',
				positive_image: '',
				obverse_image: '',
			},
		};
	},
	onLoad() {

	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 上传图片
		chooseImgs(type){
			uni.chooseImage({
				count:1,
				success: (filePaths) => {
					var imageSrc = filePaths.tempFilePaths[0];
					this.$Request.upload({
						url: '/api/barter/uploadImg',
						filePath: imageSrc,
						formData: null,
						name: 'headPic',
						success: (res)=>{
							let data = JSON.parse(res.data)
							let imgSrc = apiroot +'/'+ data.path;
							if(type == 1){
								this.formObj.positive_image = imgSrc
							}else if(type == 2){
								this.formObj.obverse_image = imgSrc
							}
						},
						fail:err=>{
							this.$api.msg('上传失败，请重新上传')
						}
					})
				},
				fail:err=>{
					this.$api.msg('上传失败，请重新上传')
				}
			});
		},
		// 检验
		handleCheck(){
			var residCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;//身份证
			if(!this.formObj.true_name){
				return this.$api.msg('请输入真实姓名')
			}
			if(!this.formObj.idcard){
				return this.$api.msg('请输入证件号')
			}
			if(!residCard.test(this.formObj.idcard)){
				return this.$api.msg('请输入正确的身份证号')
			}
			if(!this.formObj.positive_image){
				return this.$api.msg('请上传人像面')
			}
			if(!this.formObj.obverse_image){
				return this.$api.msg('请上传国徽面')
			}
			return true;
		},
		// 提交
		submitReal(){
			if(this.handleCheck() !== true){
				return false;
			}
			console.log(JSON.stringify(this.formObj))
			this.$Request.request('/api/users/verified','post',this.formObj).then((res)=>{
				if(res.status == 1){
					this.$api.msg('提交成功')
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1,
						})
					},2000)
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #F9F9F9;
	}
</style>

<style scoped lang="scss">
	.content-form {
		width: 100%;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 20rpx;
		.h3 {
			font-size: 32rpx;
			color: #292929;
			font-weight: 500;
		}
		.apply-row {
			padding-top: 36rpx;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 22rpx;
			}
			.apply-in {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				input {
					font-size: 30rpx;
					color: #1D1E22;
				}
			}
			
		}
		
		.real-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 36rpx;
			.real-item {
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 48%;
				.real-icon {
					width: 100%;
					height: 208rpx;
					display: block;
					margin-bottom: 22rpx;
				}
				.r-name {
					font-size: 24rpx;
					color: #92969E;
					line-height: 40rpx;
				}
			}
		}
		
	}
	
	.content-footer {
		width: 100%;
		padding: 96rpx 54rpx 0px;
		box-sizing: border-box;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #31bb6d;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
	}
	
</style>
